<template>
  <view class="container">
    <view v-if="list.length > 0" class="safety">
      <view v-for="(item, index) in list" :key="index" class="safety_list">
        <view class="safety_top">
          <view class="safety_top_left">
            <image src="../static/ico_shuiku.png" alt="">
            <view>{{ item.type }}</view>
          </view>
          <div class="safety_top_right">
            <view @click="toDetail(item)">查看详情 ></view>
          </div>
        </view>
        <view class="safety_bot">
          <view class="safety_bot_list">
            <view>发生时间</view>
            <view>{{ item.happenTime || '' }}</view>
          </view>
          <view class="safety_bot_list">
            <view>处理状态</view>
            <view>{{ item.disposeState == '1' ? '未处理' : '已处理' }}</view>
          </view>
          <view class="safety_bot_list">
            <view>告警说明</view>
            <view>{{ item.alertDescription || '' }}</view>
          </view>
        </view>
      </view>

      <uni-load-more :status="status" @clickLoadMore="clickLoadMores" :content-text="contentText" />
    </view>
    <view v-else class="empty">
      <image src="/pagesA/static/empty.png" mode="widthFix" />
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        list: [],
        total: 0,
        status: 'more',
        contentText: {
					contentdown: '点击查看更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多数据了'
				},
        queryParam: {
					pageSize: 10,
					pageNum: 1,
				},
        pageSizefixed: 10,
        typelist: [
          { label: '0', value: '巡查告警' },
          { label: '1', value: '水情告警' },
          { label: '2', value: '雨情告警' },
          { label: '3', value: '工情告警' },
          { label: '4', value: '水资源告警' },
        ]
      }
    },
    onLoad(options) {
      this.getlist()
    },
    methods: {
      getlist() {
        this.$request.getalarmInfoList(this.queryParam).then((res) => {
          let list = res.rows
          list.forEach(v => {
            v.type = this.typelist.find(item => item.label == v.alertType).value
          })
          this.list = list
          this.total = res.total
        }).catch((err) => {
          this.list = []
          this.total = 0
        });
      },
      // 加载更多
      clickLoadMores(e) {
			  if(this.total == this.list.length) {
			    this.status = 'noMore'
			  } else {
			    this.queryParam.pageSize += this.pageSizefixed
			    this.getlist()
			  }
			},
      // 查看详情
      toDetail(item) {
        uni.navigateTo({ url: './safetyDetail?warningId=' + item.uuid })
      }
    },
  }
</script>

<style lang="scss" scoped>
  .safety {
    margin: 0 25rpx;
    padding-top: 25rpx;

    .safety_list {
      background-color: #fff;
      border-radius: 20rpx;
      box-shadow: 0 0 5px rgba($color: #000000, $alpha: 0.2);
      position: relative;
      z-index: 1;
      margin-bottom: 25rpx;

      .safety_top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 25rpx 40rpx;
        border-bottom: 1px solid #f3f3f3;

        .safety_top_left {
          display: flex;
          align-items: center;

          image {
            width: 30rpx;
            height: 30rpx;
            margin-right: 15rpx;
          }

          view {
            font-size: 30rpx;
            line-height: 30rpx;
          }
        }

        .safety_top_right {
          font-size: 28rpx;
          line-height: 28rpx;
          color: #999;
        }
      }

      .safety_bot {
        padding: 10rpx 50rpx 10rpx 60rpx;

        .safety_bot_list {
          display: flex;
          align-items: center;
          justify-content: space-between;

          view {
            font-size: 28rpx;
            line-height: 28rpx;
            padding: 12rpx 0;

            &:nth-child(2) {
              text-align: right;
              // color: #989898;
            }
          }
        }
      }
    }
  }

  .empty {
    width: 100vw;
    height: 100vh;
    text-align: center;
    margin: 0 auto;

    image {
      width: 80%;
      margin-top: 20vh;
    }
  }
</style>
